<template>
  <div class="app-container">
    <basics-form
      ref="basicsForm"
      :actionLoading="loading"
      @actionBtnsClick="actionBtnsClick"
    />
    <el-table
      v-loading="tableLoading"
      :data="tableData"
      border
      stripe
      style="width: 100%"
    >
      <el-table-column prop="typeName" label="名称"> </el-table-column>
      <el-table-column prop="typeGroup" label="类型"> </el-table-column>
      <el-table-column prop="factory" label="厂家"> </el-table-column>
      <el-table-column label="图片">
        <template slot-scope="scope">
          <img
            style="width: 100px; height: 100px; cursor: pointer"
            :src="scope.row.imgUrl"
            @click="showImg(scope.row.imgUrl)"
          />
        </template>
      </el-table-column>
      <el-table-column prop="helpManualUrl" label="帮助手册">
        <template slot-scope="scope">
          <span
            style="color: rgb(3, 167, 240); cursor: pointer"
            @click="open(scope.row.helpManualUrl)"
            >{{ scope.row.helpManualUrl }}</span
          >
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        align="center"
        fixed="right"
        width="108px"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="showDetails(scope.row)"
            >修改</el-button
          >
          <el-popconfirm
            style="margin-left: 10px"
            title="确定删除吗？"
            @confirm="del(scope.row.typeId)"
          >
            <el-button
              slot="reference"
              size="mini"
              type="text"
              icon="el-icon-delete"
              >删除</el-button
            >
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
      :title="item ? '修改' : '新增'"
      :visible.sync="openView"
      width="700px"
      append-to-body
    >
      <basics-form
        style="margin-left: 100px"
        ref="basicsAddForm"
        :titleAligin="'right'"
        :titleWidth="'130px'"
        hiddenMustIcon
        :actionLoading="loading"
        @actionBtnsClick="addAction"
        @submit="addSubmit"
      />
    </el-dialog>
    <el-dialog :visible.sync="dialogVisible" append-to-body>
      <img width="100%" :src="dialogImageUrl" alt="" />
    </el-dialog>
  </div>
</template>

<script>
import BasicsForm from "@/components/BasicsForm";
import {
  deviceTypeList,
  saveDeviceType,
  delDeviceType,
} from "@/api/manbing/equipment";
export default {
  name: "type-index",
  components: { BasicsForm },
  props: {
    type: {
      default: () => [],
      type: Array,
    },
  },
  data() {
    return {
      loading: false,
      tableLoading: false,
      openView: false, //新增医院弹出
      tableData: [],
      item: null, //操作的类型
      dialogVisible: false,
      dialogImageUrl: "",
    };
  },
  created() {},
  methods: {
    init() {
      this.$nextTick(() => {
        this.initRules();
        this.getList();
      });
    },
    //顶部搜索组件
    initRules() {
      let rules = [
        {
          type: "actionBtns",
          selectList: [{ name: "新增", value: "success" }],
          ruleWidth: "auto",
        },
      ];
      this.$refs.basicsForm.initForm(rules);
    },
    //顶部按钮点击
    actionBtnsClick(index) {
      this.item = null;
      this.openView = true;
      this.$nextTick(() => {
        this.initAddRules();
      });
    },
    //列表数据
    getList() {
      this.loading = true;
      this.tableLoading = true;
      deviceTypeList({})
        .then((res) => {
          if (res.code == 200) {
            this.tableData = res.data;
            this.$emit("setType", res.data);
          }
        })
        .finally(() => {
          this.loading = false;
          this.tableLoading = false;
        });
    },
    showDetails(item) {
      this.openView = true;
      this.item = item;
      this.$nextTick(() => {
        this.initAddRules();
      });
    },
    initAddRules() {
      let item = this.item ? this.item : {};
      let rules = [
        {
          title: "名称",
          key: "typeName",
          value: item.typeName || "",
        },
        {
          title: "类型",
          key: "typeGroup",
          value: item.typeGroup || "",
        },
        {
          title: "厂家",
          key: "factory",
          type: "textarea",
          value: item.factory || "",
        },
        {
          title: "图片",
          key: "imgUrl",
          type: "img",
          uploadExtra: {
            uploadType: 1,
          },
          uploadAction:
            process.env.VUE_APP_BASE_API + "/chronicdisease/plat/uploadFile",
          value: item.imgUrl || "",
        },
        {
          title: "帮助手册",
          key: "helpManualUrl",
          type: "file",
          uploadExtra: {
            uploadType: 2,
          },
          uploadAction:
            process.env.VUE_APP_BASE_API + "/chronicdisease/plat/uploadFile",
          value: item.helpManualUrl || "",
        },
        {
          type: "actionBtns",
          selectList: [
            { name: "取消", value: "" },
            { name: "提交", value: "primary" },
          ],
          btnsAligin: "center",
          ruleWidth: "503px",
        },
      ];
      this.$refs.basicsAddForm.initForm(rules);
    },
    addAction(index) {
      if (index) {
        this.$refs.basicsAddForm.formValid();
      } else {
        this.openView = false;
      }
    },
    addSubmit(param) {
      if (!param) {
        return;
      }
      this.loading = true;
      if (this.item) {
        param.typeId = this.item.typeId;
      }
      saveDeviceType(param)
        .then((res) => {
          if (res.code == 200) {
            this.$modal.msgSuccess(this.item ? "修改成功" : "新增成功");
            this.openView = false;
            this.getList();
          }
        })
        .finally(() => {
          this.loading = false;
        });
    },
    //删除
    del(typeId) {
      this.loading = true;
      this.tableLoading = true;
      delDeviceType({ typeId })
        .then((res) => {
          if (res.code == 200) {
            this.$modal.msgSuccess("删除成功");
            this.getList();
          }
        })
        .finally(() => {
          this.loading = false;
          this.tableLoading = false;
        });
    },
    //打开链接
    open(url) {
      window.open(url);
    },
    //打开图片，大图
    showImg(img) {
      this.dialogVisible = true;
      this.dialogImageUrl = img;
    },
  },
};
</script>
<style scoped lang="scss">
</style>

